<template>
	<view>
	<view class="tap">
			<view :class="['item',{current:active==0} ]" @click="changeItem(0)" >厂房</view>
			<view :class="['item',{current:active==1} ]" @click="changeItem(1)">攻略</view> 
	</view>
	<template v-if="active==0">
		<uni-item :item=item v-for="(item,index) in list" :key="item.id"></uni-item>
		<uni-load-more :status="more" color="#000000" @clickLoadMore="getUserRecords"></uni-load-more>
	</template>
	<template v-if="active==1">
		<view class="padd">
			<uni-gonglue :item=item v-for="(item,index) in gonglue_list" :key="item.id"></uni-gonglue>
				</view>
				<uni-load-more :status="gonglue_more" color="#000000" @clickLoadMore="getUserRecords1"></uni-load-more>
				
		</template>
	<uni-footer></uni-footer>
</view>
</template>

<script>
import {mapGetters} from 'vuex'
	export default {
	
		data() {
			return {
				active:0,
				list:[],
				gonglue_list:[],
				more:'more',
				gonglue_more:'more',
				page:1,
				gonglue_page:1
			}
		},
		created() {
			this.getUserRecords()
			this.getUserRecords1()
		},
	
		computed:{
			
			
		},
		methods: {
		
		getUserRecords() {
			if (this.more == 'noMore') {
				return
			}
			this.more = "loading"
			this.$api.getUserRecords({
				page: this.page,
				type:0,
				source:0
			}).then(res => {
				this.list = this.list.concat(res.data);
				this.page = this.page + 1
				if (!res.links.next) {
					this.more = 'noMore'
				} else {
					this.more = "more"
				}
		
			})
		},
		getUserRecords1() {
			if (this.gonglue_more == 'noMore') {
				return
			}
			this.gonglue_more = "loading"
			this.$api.getUserRecords({
				page: this.page,
				type:0,
				source:1
			}).then(res => {
				this.gonglue_list = this.gonglue_list.concat(res.data);
				this.gonglue_page = this.gonglue_page + 1
				if (!res.links.next) {
					this.gonglue_more = 'noMore'
				} else {
					this.gonglue_more = "more"
				}
		
			})
		},
		changeItem(item){
				this.active=item
			},
	
		}
	}
</script>

<style lang="scss">
	.padd{
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.tap{
		display: flex;
		padding-left: $padding-left;
		padding-right: $padding-right;
	margin-top: 10rpx;
		justify-content: flex-start;
		.item{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 150rpx;
			height: 60rpx;
			
			border-radius:30rpx;
			font-size: 28rpx;
			color: #494949;
			margin-right: 32rpx;
			background: #F6F6F6;
		}
		.current{
			background: #DA3337;
			color: #FFFFFF;
		}
	}
</style>
